<script setup lang="ts">
import { onMounted, ref } from "vue";
const canvasRef = ref<HTMLCanvasElement | null>(null);
let ctx = null;
onMounted(() => {
  if (canvasRef.value) {
    ctx = canvasRef.value.getContext("2d");
    createCircle();
    // createLine()
    // createTriangle()
    // createRect();
    // createCurve()
    // createGradient()
    // createText();
    // createImg()
  }
});
/** 基础知识
     * stroke 创建线不绘制内部区域
     *  - strokeStyle 绘制线段时，线段的颜色
     *  - lineWidth 绘制线段时，线段的宽度
     *  - lineCap 绘制线段时，线段的端部样式 butt、round 或 square
     * fill 填充图形的内部区域
     *  - fillStyle 填充图形的内部区域时，填充的颜色
     *  - fillRect 填充矩形
     *  - strokeRect 绘制矩形
     *  - clearRect 清除矩形
     *  - beginPath 开始一个路径
     *  - moveTo 定义一个新路径：移动到画布中的指定点，不创建线条
     *  - lineTo 创建从当前点到指定点的路径

     */
/** 创建图象 */
const createImg = () => {
  if (ctx) {
    const img = new Image();
    img.src = "/public/vite.svg";
    img.onload = () => {
      ctx.drawImage(img, 10, 10);
    };
  }
};
/** 创建文本 */
const createText = () => {
  if (ctx) {
    ctx.font = "30px Arial";
    ctx.fillStyle = "red";
    ctx.textAlign = "center";
    ctx.fillText("Hello World", canvas.width / 2, canvas.height / 2);
    // ctx.strokeText("Hello World", 10, 50);
  }
};

/** 创建渐变色 */
const createGradient = () => {
  if (ctx) {
    // createLinearGradient(x,y,x1,y1) - 创建线性渐变
    // createRadialGradient(x,y,r,x1,y1,r1) - 创建径向/圆形渐变
    const gradient = ctx.createLinearGradient(0, 0, 170, 0);
    gradient.addColorStop(0, "black");
    gradient.addColorStop(1, "white");
    ctx.fillStyle = gradient;
    ctx.fillRect(20, 20, 150, 100);
  }
};

const createCircle = () => {
  if (ctx) {
    ctx.beginPath();
    ctx.arc(195, 150, 140, 0, 2 * Math.PI);
    ctx.stroke();
  }
};

const createLine = () => {
  if (ctx) {
    // 定义一个新路径：
    ctx.beginPath();
    // 定义起点：
    ctx.moveTo(100, 100);
    // 定义终点：
    ctx.lineTo(300, 300);
    // 线的宽度
    ctx.lineWidth = 10;
    // 端部样式 butt、round 或 square
    ctx.lineCap = "round";
    // 绘制：
    ctx.strokeStyle = "red";
    ctx.stroke();
  }
};

const createTriangle = () => {
  if (ctx) {
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 300);
    ctx.lineTo(300, 300);
    ctx.closePath();
    ctx.stroke();
  }
};

const createRect = () => {
  if (ctx) {
    ctx.beginPath();
    // 矩形左上角X坐标,矩形左上角Y坐标,矩形宽度,矩形高度
    ctx.rect(100, 100, 200, 200);
    ctx.lineWidth = "6";
    ctx.strokeStyle = "red";
    ctx.stroke();
  }
};
/** 创建曲线 */
const createCurve = () => {
  if (ctx) {
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.bezierCurveTo(150, 50, 300, 50, 350, 100);
    ctx.stroke();
  }
};
</script>

<template>
  <canvas id="canvas" ref="canvasRef" width="500" height="500"></canvas>
</template>

<style scoped>
canvas {
  box-shadow: 0px 0px 5px #ccc;
  border-radius: 8px;
}
</style>
